<template>
  <div class="app-container">
    <Ht-search-form
      v-show="showSearch"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      permission="user:postInfo:view"
    ></Ht-search-form>

    <!--    <div class="page-label-block">-->
    <!--      <span class="color-block">|</span>-->
    <!--      <span class="page-label-name">-->
    <!--      租户管理-->
    <!--      </span>-->
    <!--    </div>-->

    <ht-table
      ref="dataTable"
      :multi-select="true"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="regConfig"
    ></ht-table>

    <!-- 添加或修改弹出框 -->
    <el-dialog :title="title" center  :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
        <el-form-item label="岗位名称" prop="postName">
          <el-input v-model="addForm.postName" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="岗位编码" prop="postCode">
          <el-input v-model="addForm.postCode" placeholder="请输入岗位编码" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio v-for="(item, index) in dictMap.sys_normal_disable" :key="index" :label="item.value">
              {{ item.text }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示排序" prop="postSort">
          <el-input
            v-model="addForm.postSort"
            placeholder="请输入显示排序"
            oninput="value=value.replace(/[^0-9]/g,'')"
            maxlength="5"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" type="textarea" placeholder="请输入备注" maxlength="256"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiUrlConfig,
  listPostInfo,
  delPostInfo,
  addPostInfo,
  checkPostName,
  checkPostCode,
  updatePostInfo,
} from "@/api/authority_app/post/postInfo";
import { listPageMixin } from "@/libs/listPageMixin";
export default {
  name: "PostInfo",
  mixins: [listPageMixin],
  components: {},
  data() {
    // 表单校验
    var checkPostNameUnique = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("岗位名称不能为空"));
      } else {
        delete this.addForm.createTime;
        delete this.addForm.updateTime;
        checkPostName(this.addForm).then((response) => {
          var result = response.result;
          if (!result) {
            callback(new Error("岗位名称已经存在"));
          } else {
            callback();
          }
        });
      }
    };
    var checkPostCodeUnique = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("岗位编码不能为空"));
      } else {
        delete this.addForm.createTime;
        delete this.addForm.updateTime;
        checkPostCode(this.addForm).then((response) => {
          var result = response.result;
          if (!result) {
            callback(new Error("岗位编码已经存在"));
          } else {
            callback();
          }
        });
      }
    };
    var checkNum = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("排序不能为空"));
      }
      if (!Number(value)) {
        callback(new Error("只能输入数字"));
      }
      if (value.length > 5) {
        callback(new Error("长度为1-5位"));
      }
      callback();
    };
    return {
      // 查询参数
      queryParams: {
        postName: "",
        postCode: "",
        status: "",
      },
      // 搜索
      formOptions: [],
      //
      // searchFormDictList: ["sys_normal_disable"],
      // 列信息
      regConfig: apiUrlConfig,
      tableBindColumns: [
        { label: `${this.lang("authority.postInfo.form.id")}`, prop: "id", visible: false },
        { label: `${this.lang("authority.postInfo.form.postCode")}`, prop: "postCode" },
        { label: `${this.lang("authority.postInfo.form.postName")}`, prop: "postName" },
        { label: `${this.lang("authority.postInfo.form.postSort")}`, prop: "postSort" },
        { label: `${this.lang("authority.postInfo.form.status")}`, prop: "status", dictCode: "sys_normal_disable" },
        { label: `${this.lang("authority.postInfo.form.createTime")}`, prop: "createTime" },
        {
          label: `${this.lang("common.operate")}`,
          type: "operate",
          buttonList: () => [
            {
              label: `${this.lang("common.edit")}`,
              permission: "user:postInfo:edit",
              doFunc: (rowData) => {
                this.handleAction("update", rowData);
              },
            },
            {
              label: `${this.lang("common.delete")}`,
              permission: "user:postInfo:remove",
              doFunc: (rowData) => {
                this.handleAction("del", rowData);
              },
            },
          ],
        },
      ],
      opButtonList: () => {
        return [
          {
            label: `${this.lang("common.add")}`,
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:postInfo:add",
            actionType: "add",
            clickFun: () => {
              this.handleAction("add");
            },
          },
          {
            label: `${this.lang("common.delete")}`,
            type: "danger",
            icon: "el-icon-delete",
            permission: "user:postInfo:remove",
            actionType: "del",
          },
        ];
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      addForm: {
        postName: "",
        postCode: "",
        status: "1",
        remark: "",
        postSort: "",
      },
      totalRecord: 0,
      totalPage: 0,
      needCount: 0,

      rules: {
        postName: [
          { required: true, trigger: "blur", validator: checkPostNameUnique },
          { min: 1, max: 100, message: `${this.lang("validate.lengthTip", { min: 1, max: 100 })}`, trigger: "blur" },
        ],
        postCode: [
          { required: true, trigger: "blur", validator: checkPostCodeUnique },
          { min: 1, max: 64, message: `${this.lang("validate.lengthTip", { min: 1, max: 64 })}`, trigger: "blur" },
        ],
        postSort: [{ required: true, validator: checkNum, trigger: "blur" }],
        remark: [{ max: 500, message: `${this.lang("validate.maxLeng", { max: 500 })}`, trigger: "blur" }],
      },
    };
  },
  mounted() {
    const formOptions = [
      // 普通搜索
      {
        type: "input",
        prop: "postCode",
        defaultAttr: {
          size: "small",
          label: `${this.lang("authority.postInfo.form.postCode")}`,
          placeholder: "请输入岗位编码",
        },
      },
      {
        type: "input",
        prop: "postName",
        defaultAttr: {
          size: "small",
          label: `${this.lang("authority.postInfo.form.postName")}`,
          placeholder: "请输入岗位名称",
        },
      },
      {
        type: "dict",
        dict: "sys_normal_disable",
        prop: "status",
        defaultAttr: {
          size: "small",
          label: `${this.lang("authority.postInfo.form.status")}`,
          placeholder: "请选择岗位状态",
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    /***
     * 表格查询执行的API
     */
    listReq(pageParams) {
      return listPostInfo(pageParams);
    },
    /***
     * 按钮操作汇总
     */
    /***
     * 按钮操作汇总
     */
    handleAction(type, row = {}) {
      switch (type) {
        case "add":
          // this.$refs.editConfigDialog.show();
          this.handleAdd();
          break;
        // case "edit":
        //   this.handleEdit();
        //   break;
        case "del":
          this.handleDelete(row);
          break;
        case "update":
          // this.$refs.editConfigDialog.show(row.id);
          this.handleUpdate(row);
          break;
      }
    },
    // listReq(pageParams) {
    //   return listPostInfo(
    //     Object.assign({}, this.addDateRange(this.queryParams), pageParams)
    //   );
    // },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.addForm = {
        postName: "",
        postCode: "",
        status: "1",
        remark: "",
        postSort: "",
      };
      this.resetForm("addForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.doQuery();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加岗位";
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.title = "修改岗位";
      this.addForm = _.cloneDeep(row);
      this.$set(this.addForm, "status", `${row.status}`);
      this.open = true;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.addForm.id !== undefined) {
            delete this.addForm.createTime;
            delete this.addForm.updateTime;
            updatePostInfo(this.addForm).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.reset();
              this.doQuery();
            });
          } else {
            delete this.addForm.createTime;
            delete this.addForm.updateTime;
            addPostInfo(this.addForm).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.$refs.dataTable.doQuery(true);
              this.reset();
              this.doQuery();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id; //|| this.ids;
      this.$confirm("是否确认删除岗位数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPostInfo(id);
        })
        .then(() => {
          this.$refs.dataTable.doQuery(true);
          this.msgSuccess("删除成功");
        })
        .catch((action) => {});
    },
  },
};
</script>
